<template>
  <div class="all-page-heiht">
   <el-card>  <el-row > <el-button @click="addNewGoodBtn" size="small" type="success">新增物资</el-button>  </el-row></el-card>
    <el-card class="el-card-content" v-loading="loading">
       <el-card v-for="(item,index) in tableData" :key="index">
         <el-descriptions>
            <el-descriptions-item label="物资名称:"> <el-tag> {{item.goodsname}} </el-tag> </el-descriptions-item>
            <el-descriptions-item label="物资剩余:"> <el-tag> {{ item.goodsnum}} </el-tag> </el-descriptions-item>
            <el-descriptions-item label="物资最大租借数量:"> <el-tag> {{item.maxrentnum}}</el-tag> </el-descriptions-item>
              <el-descriptions-item label="点击修改状态："> 
                 <el-tag class="tag-pointer" type="success" size="small" v-if="item.push==1" @click="swichChangeBtn(item)" effect="dark" >租接中...</el-tag>
              <el-tag class="tag-pointer" type="info" size="small" @click="swichChangeBtn(item)" effect="dark" v-else>未发放</el-tag> </el-descriptions-item>
             <el-descriptions-item label="信息修改："><el-button type="primary" size="small" @click="changeBtn(item)">修改内容</el-button> </el-descriptions-item>
         <el-descriptions-item label="物资删除："><el-button @click="deTheGoodBtn(item)" type="danger" size="small">删除物资</el-button> </el-descriptions-item>
       
         </el-descriptions>
       </el-card>
    </el-card>
    <!-- 物资修改 -->
    <el-dialog v-model="goodsInfoDialogVisible" :title="goodsname+'的信息修改'" >
           <el-form>
               <el-form-item label="物资名称:"> <el-input v-model="goodsname"></el-input> </el-form-item>
               <el-form-item label="物资剩余:"> <el-input v-model="goodsnum"></el-input> </el-form-item>
               <el-form-item label="物资最大租借数:"> <el-form-item label="限购量:">
            <el-input-number
              v-model="maxrentnum"
              :min="1"
              :max="100"
            />
          </el-form-item> </el-form-item>
           </el-form>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="goodsInfoDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="confirmChangeBtn">确定修改</el-button>
          </span>
        </template>
    </el-dialog>
    <!-- 新增物资 -->
     <el-dialog v-model="goodsAddDialogVisible" title="新增物资" >
           <el-form>
               <el-form-item label="物资名称:"> <el-input v-model="mygoodsname"></el-input> </el-form-item>
               <el-form-item label="物资剩余:"> <el-input v-model="mygoodsnum"></el-input> </el-form-item>
               <el-form-item label="物资最大租借数:">
            <el-input-number
              v-model="mymaxrentnum"
              :min="1"
              :max="100"
            />
         </el-form-item>
           </el-form>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="goodsAddDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="confirmAddBtn">确定增加</el-button>
          </span>
        </template>
    </el-dialog>
  


  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import {
  ApiGoodsList,
  ApiDeTheGood,
  ApiGetChangeGood,
  ApiAddGoods
} from "@/api/index";
import { ElMessageBox } from "element-plus";
import { successMessage, errorMessage, infoMessage } from "@/utils/messageTips";
export default defineComponent({
  name: "GoodsInfo",
  setup() {
    // 用到的东西
    let tableData = ref<Array<any>>();
    // 物资修改的所有东西
    let myGoodsInfo = reactive({
     goodsid: 1,
     goodsname: "扫帚",
     goodsnum: 40,
     maxrentnum: 10,
     push: 1
    }) 

    let myGoodsAdd = reactive({
     mygoodsname: "扫帚",
     mygoodsnum: 40,
     mymaxrentnum: 10,
     mypush: 1
    }) 
     


      //  所有对话框
    const AllDialogVisible = reactive<Record<string,boolean>>({
      goodsInfoDialogVisible:false,
      goodsAddDialogVisible:false
    })
    
    let loading = ref<boolean>(true);
    // 获取物资列表
    const getGoodsList = async () => {
      loading.value = true
      const res = await ApiGoodsList() as any
      tableData.value = res
      console.log(res)
      loading.value = false;
    };
    // 新增物资
   const addNewGoodBtn =async ()=>{
       for (let key in myGoodsAdd) {
         myGoodsAdd[key] = ""
       }
       myGoodsAdd.mypush = 0;
       myGoodsAdd.mymaxrentnum = 1
       AllDialogVisible.goodsAddDialogVisible = true
   }
  //  新增确定
   const  confirmAddBtn = async ()=>{
     console.log(myGoodsAdd)
    const res = await  ApiAddGoods(myGoodsAdd.mygoodsnum,myGoodsAdd.mygoodsname,myGoodsAdd.mymaxrentnum,myGoodsAdd.mypush) as any
     if(res==1){
       successMessage("添加成功！！")
     }else{
       errorMessage("添加失败！")
       
     }
     getGoodsList()
     AllDialogVisible.goodsAddDialogVisible = false
   }
  
    // 删除按钮
   const deTheGoodBtn = async (info) =>{
      ElMessageBox.confirm(`你确定将当前${info.goodsname}删除吗？`, "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "再想想",
        type: "warning",
      })
        .then(async () => {
           const res = await ApiDeTheGood(info.goodsid) as any
           console.log(info.goodsid)
           console.log(res)
           if(res==1){
               successMessage("删除成功！！")
           }else{
             errorMessage("删除失败！")
           }
          getGoodsList();
        })
        .catch(() => {
          infoMessage("您取消了删除");
        });
      
   }
    

    //租借状态改变
   const  swichChangeBtn = async (info)=>{
     loading.value = true
         Object.assign(myGoodsInfo,info)
        let msg = myGoodsInfo.push==1?'收回':'发放'
        let pushState = myGoodsInfo.push==1?0:1
        ElMessageBox.confirm(`你确定将当前${myGoodsInfo.goodsname}${msg}吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "再想想",
        type: "warning",
      })
        .then(async () => {
           const res = await ApiGetChangeGood(myGoodsInfo.goodsid,myGoodsInfo.goodsnum,myGoodsInfo.goodsname,myGoodsInfo.maxrentnum,pushState)
          successMessage("修改状态成功！！")
          loading.value = false
          getGoodsList();
        })
        .catch(() => {
          infoMessage("您取消了修改");
        });
          loading.value = false
     }
    //  修改内容
  const changeBtn = async (info)=>{
     Object.assign(myGoodsInfo,info)
     AllDialogVisible.goodsInfoDialogVisible = true
  }
  // 修改确定
 const  confirmChangeBtn = async()=>{
        console.log(myGoodsInfo)
        const res = await ApiGetChangeGood(myGoodsInfo.goodsid,myGoodsInfo.goodsnum,myGoodsInfo.goodsname,myGoodsInfo.maxrentnum,myGoodsInfo.push)
        console.log(res)
        getGoodsList()
        AllDialogVisible.goodsInfoDialogVisible = false
        
 }

// 状态选择
    
    // 钩子函数
    onMounted(() => {
      getGoodsList();
    });

    return {
      changeBtn,
      tableData,
      ...toRefs(myGoodsInfo),
      
      swichChangeBtn,
     ...toRefs(AllDialogVisible),
      loading,
      confirmChangeBtn,
      addNewGoodBtn,
      confirmAddBtn,
      ...toRefs(myGoodsAdd),
      deTheGoodBtn
      
    };
  },
});
</script>
<style lang="less" scoped>
.addBtn {
  margin-top: -12px;
}
.el-card {
  height: 100%;
  padding: 0;
}
.goods-list-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
 .tag-pointer{
    cursor: pointer;
  }
.card-search .el-form-item {
  margin-bottom: 0px;
}
</style>
